import React from "react";
import Icon, { AntDesignOutlined, DownOutlined, GithubOutlined, UpOutlined } from '@ant-design/icons';
import { Button, Row, Col } from "antd";
import "./App.css";
import Number from "./widget/Number";
import numberStore from "./store/number";
import { ReactComponent as MobxLogo } from "./static/mobx.svg";
import { ReactComponent as ReactLogo } from "./static/logo.svg";
import { laucherUrl } from "./util/launcher_utils";

const App = () => {
  const store = numberStore;
  console.log(store);
  const reactUrl = "https://react.docschina.org/";
  const antdUrl = "https://ant.design/";
  const mobxUrl = "https://cn.mobx.js.org/";
  return (
    <div className="App">
      <header className="App-header">
        <Row gutter={[10, 10]} itemType="flex" justify="center">
          <Col span={8}>
            <Icon component={ReactLogo} className="App-logo" />
          </Col>
          <Col span={8}>
            <AntDesignOutlined
              className="App-logo"
              style={{
                padding: "2vmin"
              }} />
          </Col>
          <Col span={8}>
            <Icon component={MobxLogo} className="App-logo" />
          </Col>
        </Row>
        <p>Include antd, mobx in Create React App.</p>
        <Number />
        <div>
          <Button onClick={store.add} title="add number">
            <UpOutlined />
          </Button>
          <span className="Space" />
          <Button onClick={store.reduce} title="reduce number">
            <DownOutlined />
          </Button>
        </div>
        <footer style={{ marginTop: "8vh" }}>
          <Button onClick={laucherUrl(reactUrl)}> react doc</Button>
          <Button onClick={laucherUrl(antdUrl)}> antd doc</Button>
          <Button onClick={laucherUrl(mobxUrl)}> mobx doc</Button>
          <div>
            <Button
              icon={<GithubOutlined />}
              onClick={laucherUrl("https://gitee.com/kikt/antd_mobx_scaffold")}
            >
              Repository
            </Button>
          </div>
        </footer>
      </header>
    </div>
  );
};

export default App;
